<template>
  <div class="ShowData">
    <div class="img-info" v-if="dataType === 'img'" @click="handleStopClick">
      <el-image
        v-if="open"
        ref="MyImageView"
        :preview-src-list="srcList">
      </el-image>
    </div>
  </div>
</template>

<script>
import test1 from './test1.jpeg'
import test2 from './test2.jpeg'
export default {
  name: 'ShowData',
  data () {
    return {
      srcList: [test1, test2],
      flog: true
    }
  },
  props: {
    dataType: {
      type: String,
      default: 'img'
    },
    open: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    open: {
      handler () {
        this.$nextTick(() => {
          this.$refs.MyImageView.showViewer = true
          // console.log(this.flog)
          setTimeout(() => {
            if (this.flog) {
              // this.flog = false
              // console.log(this.flog)
              // const dom = document.querySelector('.el-image-viewer__wrapper')
              // console.log(dom)
            }
          })
        })
      },
      deep: true,
      immediate: true
    }
  },

  mounted () {},

  methods: {
    handleStopClick () {
    }
  }
}
</script>

<style lang="scss" scoped>
.ShowData {
  position: relative;
}
</style>
